<template>
  <main>
    <!-- 标题 -->
    <Head/>
    <!-- 导航区 -->
    <div style="text-align: center;">
      <div class="custom-a ">
        <!-- 直接字符串路径 -->
        <RouterLink to="/" active-class="custom-active">首页</RouterLink>
      </div>
      <div class="custom-a">
        <!-- 对象路径路由 -->
        <RouterLink :to="{path:'/news'}" active-class="custom-active">新闻</RouterLink>
      </div>
      <div class="custom-a">
        <!-- 对象名字路由 -->
        <RouterLink :to="{name:'about'}" active-class="custom-active">关于</RouterLink>
      </div>
    </div>
    <!-- 内容呈现 -->
    <div class="custom-content">
      <RouterView/>
    </div>
  </main>
</template>

<script lang="ts">
export default {
  name: 'App'
}
</script>

<script setup lang="ts">
import Hello from './components/hello.vue'
import Head from './components/Head.vue';
import { RouterView } from 'vue-router';

</script>

<style lang="css">
  .custom-a{
    display: inline-block;
    width: 50px;
    height: 20px;
    border: 1px solid black;
    margin-right: 50px;
    text-align: center;
    background-color:aqua;

  }
  .custom-a a{
    text-decoration: none;
    display: block;
    width: 50px;
    height: 20px;
  }
  .custom-content
  {
    
    margin: 0 auto;
    margin-top: 20px;
    border: 1px solid black;
    height: 500px;
    width: 1000px;
  }
  .custom-active{
    background-color: red;
  }

</style>
